<template>
  <div id="app">
    <InputText :addText="addText"></InputText>
    <InputList :updateInputCallBack="updateInputCallBack" :bugList="bugList" :delText="delText" :allChecked="allChecked" :cleanAll="cleanAll" :clkCheckedCallBack="clkCheckedCallBack"></InputList>
  </div>
</template>

<script>
  import InputText from './components/InputText.vue'
  import InputList from './components/InputList.vue'
  export default {
    name: 'App',
    data() {
      return {
        bugList: [
          { id: 1, info: 'bug信息描述1', checked: false },
          { id: 2, info: 'bug信息描述2', checked: true },
          { id: 3, info: 'bug信息描述3', checked: true },
        ]
      }
    },
    methods: {
      addText(e) {
        this.bugList.unshift(e)
      },
      delText(e) {
        let b = this.bugList.filter(item => {
          return item.id !== e
        })
        this.bugList = b
      },
      allChecked(e){
        this.bugList.forEach(item=>{
          item.checked = e
        })
      },
      cleanAll(){
        this.bugList = this.bugList.filter(item=>{
          return item.checked === false
        })
      },
      clkCheckedCallBack(ids){
        this.bugList.forEach(item=>{
          if(item.id === ids){
            item.checked = !item.checked
          }
        })
      },
      updateInputCallBack(data){
        this.bugList.forEach(item=>{
          if(item.id === data.id){
            item.info = data.val
          }
        })
      }
    },
    components: {
      InputText,
      InputList
    }
  }
</script>

<style>

</style>